<template>
  <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>客户管理</el-breadcrumb-item>
        <el-breadcrumb-item>客户列表</el-breadcrumb-item>
      </el-breadcrumb>
       <br>
    <!-- <h1>客户管理</h1> -->
  <div class="bk">
       <el-input   placeholder="用户名" v-model="page.clientname"></el-input>
        <el-button class="ss el-icon-search" type="primary" @click="getRoes">搜索</el-button>
           <!-- 信息 -->
        <el-table :data="tableData" border style="width: 100%; margin-top: 10px;">
          <el-table-column prop="id" label="序号" > </el-table-column>
          <el-table-column prop="clientname" label="用户名" >
          </el-table-column>
          <el-table-column prop="wxopenid" label="微信openid">
          </el-table-column>
        </el-table>
        
        <!-- 分页 -->
         <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[2, 3,4,5]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="num">
    </el-pagination>
  </div>

    </div>
</template>

<script lang="ts" setup>
import {
  defineComponent,
  onMounted,
  getCurrentInstance,
  reactive,
  toRefs,
  ref,
  toRaw,
  watch,
} from "vue";
import httpRequest from '../service';
// import type Node from "element-plus/es/components/tree/src/model/node";
let num = ref<Number>(0);
const tableData = ref([]);
const page = reactive({
  pageNo: 1,
  pageSize: 5,
  clientNick:'',
  clientname:''
});
onMounted(() => {
  getRoes();
});
const getRoes =  () => {
    httpRequest.request({ url: "/clients/list", data: page, method: 'post' }).then((rs)=>{
      num.value=rs.data.count
      tableData.value =rs.data.rows;
    })
};
</script>
<style lang="less" scoped>
.bk{
  border: 1px solid #cfd1d4;
  padding: 20px 20px 20px 20px;
  border-radius: 20px;
}
.el-button {
 
  width: 30px;
  height: 20px;
 padding:  0;
  font-size: 10px;
}

.el-input{
  width: 100px;
  float: left;
}
.ss{
  float: left;
  width: 60px;
  height:40px;
  margin-left:10px;
}


</style>